<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>学生管理系统</title>
    <link href="../public/css/bootstrap.min.css" rel="stylesheet">
    <link href="../public/css/style.css" rel="stylesheet">
    <style>
        .row>div {
            border: 1px solid #000;
        }
        
        .modal {
            display: block;
            opacity: 1;
            top: 100px;
            overflow: visible;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <table class="table table-striped">
                <caption>学生管理系统v1.0-展示学生</caption>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in arr">
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.gender}}</td>
                    <td><button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" @click="del(item.name, index)">删除</button></td>
                </tr>
            </table>



            <hr>
            <hr>
            <hr>
            <form action="">
                <table class="table table-striped">
                    <caption>添加学生信息</caption>
                    <tr>
                        <td>项目</td>
                        <td>信息</td>
                    </tr>
                    <tr>
                        <td>姓名</td>
                        <td>
                            <input type="text" class="form-control" id="stuname" placeholder="姓名" name="stuname" v-model="stuName">
                        </td>
                    </tr>
                    <tr>
                        <td>年龄</td>
                        <td>
                            <input type="text" class="form-control" id="stuage" placeholder="年龄" name="stuage" v-model="stuAge">
                        </td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td>
                            <label class="gen-span"><input type="radio" class="radio-info" name="gender" value="男"
                                    v-model="stuGender"> 男</label>
                            <label class="gen-span"><input type="radio" class="radio-info" name="gender" value="女"
                                    v-model="stuGender">
                                女</label>
                            <label class="gen-span"><input type="radio" class="radio-info" name="gender" value="保密"
                                    v-model="stuGender">
                                保密</label>
                        </td>
                    </tr>
                </table>
                <div style="text-align: center;"><input type="button" class="btn btn-info btn-sm add-btn" value="确定增加" @click="add" /></div>
            </form>
            <!-- 弹窗子组件 -->
            <model :show="isShowModal" :name="delName" @back="back" @del="realDel"></model>
        </div>
    </div>

    <!-- 删除按钮确认框 抽取-->
    <template id="model">
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" v-show="show">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true" @click="isShowModal=!isShowModal">×</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">确认框</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="message-text" class="control-label">确定要删除<strong class="control-label-name"
                                        style="color:blue">{{ name }}</strong>吗？</label>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" @click="back">返回</button>
                        <a href="###" class="delete-a"><button type="button" class="btn btn-primary"
                                @click="realDel()">确认</button></a>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        // 现有数据：  需求：把删除对话框做成子组件，不影响原有的功能。
        /*
        arr:[
            { name: '小明', age:12, gender:"男" },
            { name: '小红', age:10, gender:"女" },
            { name: '小刚', age:16, gender:"保密" }
        ]
        */

        let model = {
            template: '#model',
            props: {
                show: {
                    type: Boolean,
                    default: false
                },
                name: {
                    type: String
                }
            },
            methods: {
                back() {
                    this.$emit('back')
                },
                realDel() {
                    this.$emit('del')
                }
            },
        }

        new Vue({
            el: "#app",
            data: {
                // 默认的学生数据
                arr: [{
                    name: '小明',
                    age: 12,
                    gender: "男"
                }, {
                    name: '小红',
                    age: 10,
                    gender: "女"
                }, {
                    name: '小刚',
                    age: 16,
                    gender: "保密"
                }],
                // 是否要展示对话框
                isShowModal: false,
                // 要添加的学生姓名
                stuName: "",
                // 要添加的学生年龄
                stuAge: "",
                // 要添加的学生性别
                stuGender: "男",
                // 要删除的学生姓名
                delName: "",
                // 要删除的学生下标
                delIndex: null
            },
            methods: {
                add() {
                    // 判空， 如果为空，就alert("提示为空")   return

                    if (this.stuName.trim() == "" || this.stuAge.trim() == "") {
                        alert("姓名和年龄都不能为空");
                        return
                    }
                    // 添加
                    this.arr.push({
                        name: this.stuName,
                        age: this.stuAge,
                        gender: this.stuGender
                    })
                },
                del(name, i) {
                    this.isShowModal = true;
                    this.delName = name;
                    this.delIndex = i;
                },
                realDel() {
                    this.arr.splice(this.delIndex, 1);
                    this.isShowModal = false;
                },
                back() {
                    this.isShowModal = false
                }

            },
            components: {
                model
            }
        })
    </script>
</body>

</html>